<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <span>没有防抖<input type="text" id="unDebounce"></span>
</body>
<script>
    function ajax(content) {
        console.log('request' + content);
    }
    //防抖
    function debounce(fun, delay) {
        return function (args) {
            let that = this
            let _args = args
            clearTimeout(fun.id)
            fun.id = setTimeout(function () {
                fun.call(that, _args)
            }, delay)
        }
    }
    //节流
    function throttle(fun, delay) {
        let last, deferTime
        return function (args) {
            let that = this
            let _args = args
            let now = +new Date()
            console.log(now);
            if (last && now < last + delay) {
                clearTimeout(deferTime)
                deferTime = setTimeout(function () {
                    last = now
                    fun.call(that, ..._args)
                }, delay)
            } else {
                last = now
                fun.call(that, ..._args)
            }
        }
    }
    let debounceAjax = debounce(ajax, 500)
    let throttleAjax = throttle(ajax,1000)
    let inputA = document.getElementById('unDebounce')
    inputA.addEventListener('keyup', function (e) {
        throttleAjax(e.target.value)
    })
</script>

</html>